<template>
  <div>
      <el-col :span="20">
          <el-button size="mini" type="primary" @click="insert()">增加</el-button>
          <el-button size="mini" type="warning" @click="stop()">停用</el-button>
          <el-button size="mini" type="success" @click="start()">启动</el-button>
          <el-button size="mini" type="danger" @click="del()">删除</el-button>
          <el-input v-model="searchInput" suffix-icon="el-icon-search" placeholder="部件类别名称" size="small"
                   style="width: 120px" />
          <el-button @click="search(searchInput)">搜索</el-button>

      </el-col>
      <template v-if="tableData!=null">
          <el-table ref="multipleTable" :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
                    tooltip-effect="dark" style="width: 100%"
                    @selection-change="handleSelectionChange">
              <el-table-column type="selection" label="全选" width="55">
              </el-table-column>
              <el-table-column type="index" label="序号" :index="indexMethod">
              </el-table-column>
              <el-table-column prop="name" label="部件类别" sortable width="180">
              </el-table-column>
              <el-table-column prop="username" width="150" label="部件编码">
              </el-table-column>
              <el-table-column prop="website" label="部件说明" sortable width="120">
              </el-table-column>
              <el-table-column prop="email" label="创建人" sortable width="120">
              </el-table-column>
              <el-table-column prop="website" label="创建时间" sortable width="120">
              </el-table-column>
              <el-table-column prop="phone" label="状态">
              </el-table-column>
              <el-table-column label="操作">
                  <template slot-scope="scope"><!--查看功能没做好 -->
                      <el-button
                              size="small" type="primary" plain
                              @click="handleView(scope.$index, scope.row)"><i class="el-icon-location"></i>查看</el-button>
                      <el-button
                              size="mini"
                              type="danger"
                              @click="handleUpdate(scope.$index, scope.row)">修改</el-button>
                  </template>
              </el-table-column>
          </el-table>
      </template>
      <el-col :span="20"><!--翻页功能 -->
          <div class="page-item">
              <el-pagination background  @size-change="handleSizeChange" @current-change="handleCurrentChange"
                             :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="100"
                             layout="total, sizes, prev, pager, next, jumper" :total="40"/><!--这个total
                                                                                              比tableData先渲染了，导致length
                                                                                              为null，待解决，先设为定值 -->
          </div>
      </el-col>
  </div>
</template>
<script>
export default {
  data(){
    return{
    tableData:null,//所有数据
    currentPage:1,//当前页数
    pagesize:10,//分页数
    listSelect:[],
    searchInput:" ",
    }
  },
  methods:{
      getList(url) {//请求数据库，现在用自动生成的
          this.getRequest(url).then((res)=>{
              console.log(res)
              this.tableData=res.data
              console.log(this.tableData.length)
          })
              .catch((error)=>{
                  console.log(error)
              })
      },
      insert(){
        console.log("增加设备");//弹框
      },
      stop(){
          console.log("停止设备");//根据序号选中
          console.log(this.listSelect);
      },
      start(){
          console.log("启动设备");//根据序号选中,发送ajax改变状态字段
          console.log(this.listSelect);
      },
      del(){
          console.log("删除设备");//根据序号选中
          console.log(this.listSelect)//被选中的对象数列表
          location.reload();
          //删除后刷新页面，清空选中列表
      },
      search(val){//搜索后切tableData或由后台实现
        if(val){
           console.log(this.searchInput);
          }else{
            alert("输入为空")
        }
     },

      indexMethod(index) {//序号递增
          return index+1;
      },
      handleUpdate(index, row){//修改
          console.log(index,row);
      },
      handleSizeChange: function (size) {//得到当前行数
              this.pagesize = size;

      },
      handleCurrentChange: function(currentPage){//得到当前
              this.currentPage = currentPage;
      },
      handleSelectionChange(val) {

          this.listSelect.push(val[val.length-1]);
          console.log(this.listSelect);
      }


  },
    created() {//构造时调用,向数据库请求设备列表
        this.getList('/users')
    },
  mounted(){},
  updated(){},
  destroyed(){},
}
</script>
<style scoped>

</style>